<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音/视频批量提取</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
         /* 遮罩层 */ .overlay { display: none; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;
        } /* 弹窗样式 */ .modal { display: none; position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%); background: #fff; padding: 20px; box-shadow:
        0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 2; width: 300px; text-align: center;
        } /* 关闭按钮 */ .close-btn { background-color: #f44336; color: white; border:
        none; padding: 5px 10px; cursor: pointer; border-radius: 5px; } .close-btn:hover
        { background-color: #d32f2f; }
        body {
            padding: 20px;
            background: #fff;
        }

        .container {
            display: flex;
            gap: 20px;
        }

        .main-content {
            flex: 1;
        }

        .right-panel {
            width: 300px;
        }

        .top-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .required::before {
            content: '*';
            color: #ff4d4f;
            margin-right: 4px;
        }

        input[type="text"] {
            width: 240px;
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 20px;
        }

        .video-count {
            margin: 0 10px;
            color: #666;
        }

        .btn {
            height: 32px;
            padding: 4px 15px;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
            border: none;
        }

        .btn-primary {
            background: #1890ff;
            color: white;
        }

        .btn-default {
            background: #fff;
            border: 1px solid #d9d9d9;
            color: #333;
        }

        .status-bar {
            margin: 16px 0;
            color: #666;
            font-size: 20px;
        }

        .red-text {
            color: #ff4d4f;
        }

        .table-container {
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background: #fafafa;
            padding: 16px;
            text-align: left;
            font-weight: normal;
            color: #666;
            border-bottom: 1px solid #f0f0f0;
        }

        .empty-state {
            padding: 48px 0;
            text-align: center;
            color: #999;
        }

        .empty-state img {
            width: 64px;
            height: 64px;
            margin-bottom: 8px;
        }

        .settings-section {
            background: #fff;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .settings-title {
            font-size: 20px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .progress-section {
            margin-top: 20px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-inner {
            width: 0%;
            height: 100%;
            background: #1890ff;
            transition: width 0.3s;
        }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>

    <div class="container">

        <div id="overlay" class="overlay" onclick="closeModal()"></div>

        <div id="modal" class="modal">
            <p id="message">消息弹窗</p>
            <!-- TODO: 调整消息弹窗样式 -->
            <button class="close-btn" onclick="closeModal()">关闭</button>
        </div>


        <div class="main-content">
            <div class="top-controls">
                <div class="input-group">
                    <label class="required">素材目录:</label>
                    <label for="clipInput"></label><input type="text" id="clipInput" placeholder="请选择视频文件/文件夹" onclick="clipInput('clipInput')" value="">
                </div>
                <span id="clipInputCount">视频数量: 0</span>
                <div class="input-group">
                    <label class="required">导出目录:</label>
                    <label for="clipOutput"></label><input type="text" onclick="chooseFolder('clipOutput')" id="clipOutput" placeholder="请选择文件夹" value="">
                </div>
                <button class="btn btn-primary" onclick="openFile('clipOutput')">打开文件夹</button>
                <button class="btn btn-primary" onclick="start_work()">开始任务</button>
                <button class="btn btn-default">停止任务</button>
            </div>

            <div class="status-bar">
                已选择<span class="red-text" id="select_video_count_total">0</span>个视频
                总时长: <span id="select_video_duration_total">0.00</span>分钟
                <input type="checkbox" id="selectAll" class="selectAll" onchange="selectAll()">
                <label for="selectAll">选择全部</label>
                <div class="file-list">
                        <table>
                            <thead>
                                <tr>
                                <th style="width: 40px;"><label>选择</label></th>
                                <th style="width: 60px;">序号</th>
                                <th>文件名</th>
                                <th style="width: 100px;">时长</th>
                                <th style="width: 100px;">大小</th>
                            </tr>
                            </thead>
                            <tbody id="shotListBody">
                            <!-- 动态生成的行将被插入这里 -->
                            </tbody>
                        </table>
                    </div>
            </div>

        </div>

        <div class="right-panel">
            <div class="settings-section">
                <div class="settings-title">文案保存设置</div>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="saveType" value="0" checked> 保存为独立文件
                    </label>
                    <label>
                        <input type="radio" name="saveType" value="1" > 合并保存一个文件
                    </label>
                </div>
            </div>

            <div class="progress-section">
                <div style="margin-bottom: 8px;">任务进度:</div>
                <div class="progress-bar">
                    <div class="progress-inner" style="width: 0"></div>
                </div>
                <div style="text-align: right; margin-top: 4px;">0%</div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let items = [];

            new QWebChannel(parent.qt.webChannelTransport, function (channel) {
                 Bridge = channel.objects.Bridge;


                 Bridge.started.connect(function (msg) {
                    showModal(msg)
                });
                 Bridge.finished.connect(function (msg) {
                    showModal(msg)
                });
                 Bridge.failed.connect(function (msg) {
                    showModal(msg)
                });


                 // 选择文件夹
                 window.chooseFolder = function (eid) {
                        Bridge.choose_folder(eid);
                    };
                 // 打开文件或者文件夹
                 window.openFile = function (eid) {
                    let path = document.getElementById(eid).value;
                    if (path) {
                        Bridge.open_file(path);
                    }
                 };

                 window.clipInput = function () {Bridge.choose_folder_and_read_video_files("clipInput")};
                 // 选择的文件夹信号槽
                 Bridge.select_folder_result.connect(function (eid, path) {
                    document.getElementById(eid).value = path;
                });
                 // 返回智能分镜目录
                 Bridge.select_files_result.connect(function (eid, files, count) {
                        // 渲染基础合成分镜列表
                        const tbody = document.getElementById('shotListBody');
                        if (!tbody) {
                            return;
                        }
                        let files_list = [];
                        items = [];
                        for (let file_item of files){
                            files_list.push(`
                                <tr data-id="">
                                    <td><label>
                                        <input type="checkbox" class="row-check" value="${file_item.file}">
                                    </label></td>
                                    <td>${file_item.id}</td>
                                    <td>${file_item.file}</td>
                                    <td>${file_item.duration}秒</td>
                                    <td>${file_item.size}</td>
                                </tr>
                            `);
                            file_item.status = false;
                            items.push(file_item);
                        }
                        tbody.innerHTML = files_list.join('');
                        // 更新选择的文件数量
                        document.getElementById("clipInputCount").innerText = "视频数量: " + count;
                        bindEventListeners();
                    });

                 // 开始任务
                 window.start_work = function () {
                     let input_path = [],
                         status = document.querySelector('input[name="saveType"]:checked').value,
                         output_path = document.getElementById("clipOutput").value

                     for (let item of items){
                         if (item.status) {
                             input_path.push(item.file);
                         }
                     }
                     Bridge.extract_audio(JSON.stringify(input_path) , output_path, parseInt(status))
                 };
                 // 停止任务
             });

            // 开始任务
            let selected_video_count_elm = document.getElementById("select_video_count_total"),
                selected_video_duration_elm = document.getElementById("select_video_duration_total");

            window.showModal = function (message) {
                document.getElementById("message").innerText = message;
                document.getElementById("overlay").style.display = "block";
                document.getElementById("modal").style.display = "block";
            };
            window.closeModal = function () {
                        document.getElementById("overlay").style.display = "none";
                        document.getElementById("modal").style.display = "none";
                    };
            // 选择全部
            window.selectAll = function () {
                let selectAllCheckbox = document.getElementById("selectAll");
                let rowCheckboxes = document.querySelectorAll(".row-check");
                rowCheckboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
                if (selectAllCheckbox.checked){
                    selected_video_count_elm.innerText = rowCheckboxes.length;
                    // 从items中计算总时长
                    let total_duration = 0;
                    for (let item of items){
                        total_duration += item.duration;
                        item.status = true;
                    }
                    selected_video_duration_elm.innerText = (total_duration / 60).toFixed(2);
                } else {
                    for (let item of items){
                        item.status = false;
                    }
                    selected_video_count_elm.innerText = 0;
                    selected_video_duration_elm.innerText = 0;
                }
            };

            window.update_total = function () {
                let total_duration = 0;
                let total_count = 0;
                for (let item of items) {
                    if (item.status) {
                        total_duration += item.duration;
                        total_count++;
                    }
                }
                selected_video_count_elm.innerText = total_count;
                selected_video_duration_elm.innerText = (total_duration / 60).toFixed(2);
            };

            // 监听单个视频选择
            window.bindEventListeners = function () {
                document.querySelectorAll(".row-check").forEach(checkbox => {
                    checkbox.addEventListener("change", function (event) {
                        if (checkbox.checked) {
                            for (let item of items) {
                                if (item.file === event.target.value) {
                                    item.status = true;
                                }
                            }
                        }
                        else {
                            for (let item of items) {
                                if (item.file === event.target.value) {
                                    item.status = false;
                                }
                            }
                        }
                        update_total();
                    });
                });
            }
        });

    </script>
</body>
</html> 